<template>
  <div id="root-div">
    <div id="main-div">
      <div id="login-div">
        <div id="login-text">
          登录
        </div>
        <div>
          <label for="account">
            <input id="account" type="text" placeholder="BANK ID" v-model="account"/>
          </label>

          <label for="password">
            <input id="password" type="password" placeholder="PASSWORD" v-model="password"/>
          </label>

          <Button class="commit" @click="commitLogin">登录</Button>
        </div>
        <div style="margin-top: 15px;">
          <router-link to="/missing_password" id="missing-password">忘记密码？</router-link>
          <router-link to="/register" id="register">注册</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        account: '',
        password: '',
      }
    },
    methods: {
      commitLogin() {
        this.$http.post('/login/', this.qs.stringify({
          account: this.account,
          password: this.password,
        })).then(res => {
          console.log(res)
          if (res.data.code === 1) {
            this.$store.commit("userStatus", {
              isLogin: true,
              account: this.account
            })
            this.$router.push("/home")
          } else {
            this.$Message.error(res.data.msg)
          }
        }).catch(err => {
          this.$Message.error(err.toString());
        });
      }
    },
  }
</script>

<style scoped>
  /*url中用别名会出错，所以还是使用相对路径*/
  #root-div {
    background-image: url("../assets/img/login-scut.png");
    background-repeat: no-repeat;
    background-size: 100% 612px;
    -moz-background-size: 100% 100%;
    width: 100%;
    min-width: 1500px;
    height: 610px;
    /*背景图片的高度比height大一点防止出现白条*/
  }

  #main-div {
    width: 1200px;
    margin: 0 auto;
    padding-top: 100px;
  }

  #login-div {
    width: 430px;
    height: 400px;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    margin-left: 770px;
  }

  #login-text {
    width: 48px;
    height: 23px;
    font-size: 24px;
    font-family: Microsoft YaHei, serif;
    font-weight: 400;
    color: rgba(17, 17, 17, 1);
    line-height: 30px;
    padding-top: 30px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 40px;
  }

  #account {
    width: 360px;
    height: 50px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(217, 217, 217, 1);
    border-radius: 25px;
    margin-left: 35px;
  }

  #account::placeholder {
    font-size: 14px;
    font-family: Microsoft YaHei, serif;
    font-weight: 400;
    color: rgba(179, 179, 179, 1);
    line-height: 30px;
    padding-left: 20px;
  }

  #password {
    width: 360px;
    height: 50px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(217, 217, 217, 1);
    border-radius: 25px;
    margin-left: 35px;
    margin-top: 20px;
  }

  #password::placeholder {
    font-size: 14px;
    font-family: Microsoft YaHei, serif;
    font-weight: 400;
    color: rgba(179, 179, 179, 1);
    line-height: 30px;
    padding-left: 20px;
  }

  #verify-code {
    width: 250px;
    height: 50px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(217, 217, 217, 1);
    border-radius: 25px;
    margin-left: 35px;
    margin-top: 20px;
    margin-right: 12px;
  }

  #verify-code::placeholder {
    font-size: 14px;
    color: rgba(179, 179, 179, 1);
    line-height: 30px;
    padding-left: 20px;
  }

  .commit {
    width: 360px;
    height: 50px;
    background: rgba(0, 70, 140, 1);
    border-radius: 25px;
    margin-top: 20px;
    margin-left: 35px;
    color: rgba(255, 255, 255, 1);
  }

  #missing-password {
    width: 63px;
    height: 12px;
    font-size: 14px;
    font-family: Microsoft YaHei, serif;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 30px;
    padding-left: 42px;
    text-decoration: none;
  }

  #register {
    text-decoration: none;
    width: 28px;
    height: 12px;
    font-size: 14px;
    font-family: Microsoft YaHei, serif;
    font-weight: 400;
    color: rgba(17, 112, 202, 1);
    line-height: 30px;
    margin-left: 255px;
  }

  input {
    text-indent: 15px;
  }

  #verify-img {
    width: 100px;
    height: 50px;
    border-radius: 25px;
    vertical-align: top;
    margin-top: 20px;
  }
</style>
